<style lang='stylus'>
.header {
  width 710rpx
  height 100vh
  background-color #f1f1f1
}
.planPannal {
  height: 300rpx;
  background-color #ffffff
  text-align: center;
}
.planPannalCard {
  width 200rpx
  height: 200rpx;
  line-height:200rpx;
  color #fff
  font-weight: bold;
  background: linear-gradient(135deg, #fe6263, #fe6061, #fe494b);
  text-align: center;
} 
.planPrice-btn {
  width: 300rpx;
  height: 100rpx;
}
</style>
<template>
 <view class="header pd20">

  <view class="planPannal radius-16 flex flex-wrap mg20-y" v-for="(order,index) in list" :key="index">

   <view class="planPannalCard radius-16 mgl20 ft48">{{ order.cardType === 1 ? '城市卡' : order.cardType === 2 ? '设备卡':'' }}</view>
   <view class="flex1">
     <view class="ft32 flex flex-wrap">
       <view class="pdl20 pdt10">可使用时间:{{Math.floor((order.useTimeQuantum)/1000/3600)}}小时</view>
      
       <view class="pdl20 pdt10">有效期:{{order.timeDay}}天</view>
      <view class="pdl30 pdt10">价格:￥{{order.amount/100}}元</view>
     </view>
     <view class="planPrice-btn mg85-x">
        <i-button @click="buyOrder (order.cardTypeId)" type="primary" shape="circle" size="small">购买</i-button>
     </view>
   </view>
   
  </view>
   <i-message id="message" />
    <i-modal title="提示" :visible="openVisible" @ok="buyCard()" @cancel="openVisible = false">
      <view>确定购买？</view>
    </i-modal>
 </view>
</template>

<script>
import { getFrontCardList, payUserCard } from "@/api";
import { parseTime } from "@/utils";
import store from "@/store";
const { $Message } = require("@/wxcomponents/iview/base/index");
export default {
  data() {
    return {
      openVisible: false,
      equipmentId: "",
      cardTypeId: null,
      equipmentNumber: "",
      mouthNo: "",
      type: 1,
      list: [],
    };
  },
  methods: {
    buyOrder(id) {
      this.openVisible = true;
      this.cardTypeId = id;
    },
    // 月卡列表
    async getPlanList() {
      //调用服务器接口
      const { data } = await getFrontCardList({
        equipmentId: this.equipmentId,
      });
      if (data.code === 1) {
        this.list = data.data;
        // 检测城市月卡套餐，若无则提示使用余额支付,
        if(this.list.length<1){
         $Message({
          content: "该城市暂无月卡可购买,请使用余额支付",
          type: "error",
          duration: 3,
        });
         setTimeout(()=>{
          wx.navigateBack({
           delta: 1
        })
        },2000)
        }
       
      }
    },
    //买月卡
    async buyCard() {
      //调用服务器接口
      const { data } = await payUserCard({
        // equipmentId: this.equipmentId,
        cardTypeId: this.cardTypeId,
        payType: 1,
      });
      
      if (data.code == 1) {
        this.openVisible = false;
        this.pay(data.data);
      } else if (data.code == 128) {
        this.openVisible = false;
        // $Message({
        //   content: "该卡已购买",
        //   type: "success",
        //   duration: 1
        // });
        setTimeout(() => {
          uni.navigateBack({
            url: `/pagesA/order/inputCode`,
            // success() {
            //  var page = getCurrentPages().pop();
            // if (page == undefined || page == null) return;
            // page.onLoad();
            //  }
          });
        }, 2000);
      } else {
        $Message({
          content: "购买出错，请联系后台人员",
          type: "error",
          duration: 1,
        });
        setTimeout(() => {
          uni.navigateBack({
            url: `/pages/index/index`,
          });
        }, 2000);
      }
    },

    async pay(data) {
      wx.requestPayment({
        ...data,
        success: async (res) => {
          $Message({
            content: "支付成功",
            type: "success",
            duration: 1,
          });
          if (this.equipmentNumber) {
            setTimeout(() => {
              uni.navigateBack({
                //  success: function() {
                //   beforePage.onLoad(); // 执行前一个页面的onLoad方法
                //    },
                url: `/pagesA/order/inputCode`,
              });
            }, 2000);
          } else {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
          }
        },
        fail: (err) => {},
      });
    },
  },

  onLoad(option) {
    console.log(option);
    // 接收设备id
    if (option.num) {
      this.equipmentId = option.id.trim();
      this.equipmentNumber = option.num.trim();
      this.getPlanList();
    }
    if (option.mouthNo) {
      this.mouthNo = option.mouthNo;
    }
  },
};
</script>

